<script setup lang="ts">
import { ref } from 'vue'
import MyTable from '../components/MyTable.vue';
import MyForm from "../components/MyForm.vue";
import {getAllFood} from '../http/foodController';

const input = ref('')
const cnt = ref(0)
const formVisiable = ref(false)

function incre() {
  cnt.value++
}

let tableData = ref<any[]>([])
async function query() {
  const data = await getAllFood() // 等待异步结果
  tableData.value = data as any[] // 将结果转换为 any[] 类型
}

// function clear() {
//   cnt.value = 0
// }

function showAddForm() {
  formVisiable.value = !formVisiable.value
}

function closeForm() {
  formVisiable.value = false
}

const formData = {
  username: "",
  password: "",
}

const formColumns = [
  { label: "Name", prop: "name"},
  { label: "Calories", prop: "calories"},
  { label: "Protein", prop: "protein"},
  { label: "Fat", prop: "carbs"},
  { label: "Carbs", prop: "carbs"},
  { label: "Sodium", prop: "sodium"},
]

const formRules = {
  username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, max: 15, message: "密码长度在6到15个字符之间", trigger: "blur" },
  ],
}

const columnData = [
  { prop: 'name', label: 'Name', width: '120'},
  { prop: 'calories', label: 'Calories', width: '120'},
  { prop: 'protein', label: 'Protein', width: '120'},
  { prop: 'fat', label: 'Fat', width: '120'},
  { prop: 'carbs', label: 'Carbs', width: '120'},
  { prop: 'sodium', label: 'Sodium', width: '120'},
  { prop: 'picAddr', label: 'Pic', width: '120'},
]
</script>

<template>
  <el-row :gutter="1">
    <el-col :span="15">
        <el-input v-model="input" placeholder="Please input"></el-input>
    </el-col>
    <el-col :span="3">
        <el-button type="success" @click="query">Search</el-button>
    </el-col>
    <el-col :span="3">
      <el-button type="info" plain @click="incre">Cnt: {{ cnt }}</el-button>
    </el-col>
    <el-col :span="3">
      <el-button type="primary" @click="showAddForm">Add</el-button>
    </el-col>
  </el-row>

  <my-table :tableData="tableData" :columnData="columnData"></my-table>

  <el-dialog
    v-model="formVisiable"
    title="Tips"
    width="30%">
    <my-form :formData="formData" :formColumns="formColumns" :formRules="formRules"
      label-width="50px" ref="baseform"></my-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeForm">Cancel</el-button>
      </span>
    </template>
  </el-dialog>

  
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
